<template>
	<view class="movable-go-home">
		<movable-area class="movable-area">
			<movable-view 
				class="movable-view" 
				:style="{ width: w, height: h }" 
				:x="x" 
				:y="y" 
				direction="all" 
				inertia 
			>
				<view class="movable-wrap">
					<image class="movable-icon" src="@/static/icons/shuangbiao.png" mode="aspectFit"></image>
					<view class="movable-content">
						<view class="movable-btn" @click="goHomePage"></view>
						<view class="movable-btn" @click="toServicePage"></view>
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	const { windowWidth, windowHeight } = uni.getSystemInfoSync()
	
	const w = 166 / 3
	const h = 349 / 3
	const gap = 10
	
	const x = windowWidth - w - gap
	const y = windowHeight * 0.6
	
	export default {
		data() {
			return {
				w: w + 'px',
				h: h + 'px',
				x: x,
				y: y
			}
		},
		methods: {
			// 首页
			goHomePage() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 客服
			toServicePage() {
				window.open(config.servicePage)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.movable-go-home {
		.movable-area {
			position: fixed;
			inset: 0;
			z-index: 99999;
			width: 100%;
			height: 100%;
			pointer-events: none;
			.movable-view {
				pointer-events: all;
				.movable-wrap {
					width: 100%;
					height: 100%;
					position: relative;
					.movable-icon {
						width: 100%;
						height: 100%;
						opacity: 0.85;
					}
					.movable-content {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						.movable-btn {
							flex: 1;
						}
					}
				}
			}
		}
	}
</style>